<template>
  <div class="personal-setting">
   <!-- 个人隐私设置 -->
   <!-- <div class="setting-title">
      <span>个人隐私设置</span>
    </div> -->
   <div class="setting-box">
    
   <div class="setting">
    <div class="A-setting-list">
      <span>个人主页访问权限</span>
      <el-radio v-model="personalPageAccess" :label="true">是</el-radio>
      <el-radio v-model="personalPageAccess" :label="false">否</el-radio>
    </div>
    <div class="A-setting-list">
      <span>个人帖子访问权限</span>
      <el-radio v-model="personalCollected" :label="true">是</el-radio>
      <el-radio v-model="personalCollected" :label="false">否</el-radio>
    </div>
    <div class="A-setting-list">
      <span> 个人点赞访问权限</span>
      <el-radio v-model="personalPost" :label="true">是</el-radio>
      <el-radio v-model="personalPost" :label="false">否</el-radio>
    </div>
   </div>
   </div>
   <div class="btnUpDateSetting">
    <el-button type="primary" @click="UpDateSetting()">保存</el-button>
   </div>
  </div>
</template>

<script>
export default {
    name:'personalSetting',
    data() {
      return {
        // 个人主页访问
        personalPageAccess:true,
        // 个人已发布帖子访问
        personalCollected:true,
        // 个人点赞帖子访问
        personalPost:true,
      }
    },
    methods: {
      UpDateSetting(){
        console.log(
        "用户提交了设置信息",
        "UpDateSetting:"+this.personalPageAccess,
        "personalCollected"+this.personalCollected,
        "personalPost:"+this.personalPost,
        );
      }
    },
}
</script>

<style scoped>
.personal-setting{
  width: 100%;
  min-height: 400px;
  height: auto;
}
.setting-title{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  padding-left: 20px;
  color: #666;
  font-weight: bold;
  border-bottom: 1px solid #e5e5e5;
}
.setting-box{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-content: flex-start;
}
.setting{
  width: 800px;
  height: auto;
  min-height: 200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #fff;
}
.A-setting-list{
  width: 100%;
  margin-bottom: 10px;
  margin-top: 10px;

}
.A-setting-list span{
  display: inline-block;
  margin-right: 20px;
  color: #333;
}
.btnUpDateSetting{
  width: 100%;
  height: 40px;
  margin-top: 30px;
  text-align: center;
}
</style>